<template>
    <el-main class="bodyBox" v-loading="showLoading">
		<el-form ref="actionform" :model="formData" label-width="80px">
			<el-form-item label="红包名称" verify prop="redPacketName">
				<el-input class="formItem" v-model="formData.redPacketName" placeholder="红包名称"></el-input>
			</el-form-item>
			<el-form-item label="红包金额" verify prop="redPacketAmount">
				<el-input-number v-model="formData.redPacketAmount" class="formItem" :min="0" label="红包金额" />
			</el-form-item>
			<el-form-item label="红包分类" verify prop="redPacketType">
				<el-select v-model="formData.redPacketType" placeholder="请选择分类" @change="checkCategory">
					<el-option
						v-for="item in redPacketList"
						:key="item.labelId"
						:label="item.labelText"
						:value="item.labelId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商户列表" verify prop="storeUid">
				<el-select v-model="formData.storeUid" placeholder="请选择商户" @change="handleChange">
					<el-option
						v-for="item in storeList"
						:key="item.merchantUid"
						:label="item.merchantName"
						:value="item.merchantUid"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="封面" prop="redPacketCoverUrl" verify>
				<el-upload
					:action="uploadUrl"
					:data="access_token"
					:show-file-list="false"
					:before-upload="beforeUpload"
					:on-success="uploadPreviewSuccess"
				>
					<el-image
						:src="formData.redPacketCoverUrl"
						class="avatar"
						fit="scale-down"
						v-if="formData.redPacketCoverUrl" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					<el-input class="inputs none imgArea" v-model="formData.redPacketCoverUrl"></el-input>
				</el-upload>
			</el-form-item>
		</el-form>
		<div class="footer flex-center">
			<el-button type="primary" @click="handlePost">确  认</el-button>
			<el-button @click="closeDialog(false)">取  消</el-button>
		</div>
    </el-main>
</template>

<script>
    import {
		addRedPacket,
		editRedPacket
    } from "@/api/table";
    export default {
        name: "REDPACKET_ACTION",
        components: {},
        props: {
            infoData: {
            	type: Object,
                default: {}
			},
			storeList: {
				type: Array,
                default: []
			},
			redPacketList: {
				type: Array,
                default: []
			},
		},
        data() {
            return {
				formData: {},
				showLoading: false,             
				access_token: {
                    access_token: this.$store.getters.token
                },
				uploadUrl: process.env[this.$base] + "/medias/image/upload",
            }
        },
      	methods: {
			updateData() {
				const redPacketAmount = this.$util.prices(this.infoData.redPacketAmount);
				this.formData = {...this.infoData, redPacketAmount};
			},
			// 选择商户
			handleChange(e) {
				this.formData.storeUid = e
			},
			// 商品分类
            checkCategory(e) {
                this.formData.redPacketType = e
            },

			// 图片上传前的钩子
			beforeUpload(file) {
				var type = "image/jpg,image/jpeg,image/png,image/gif";
				const isJPG = type.indexOf(file.type) != -1;
				const isLt1M = file.size / 1024 / 1024 < 1;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG,JPEG,PNG,GIF 格式!");
				}
				if (!isLt1M) {
					this.$message.error("上传图片大小不能超过 1MB!");
				}
				return isJPG && isLt1M;
			},

			//上传之前格式和大小判断
			beforeAvatarUploadVideo(file) {
				const isLt100M = file.size / 1024 / 1024 < 100;
				if(!isLt100M) {
					this.$message.error("视频文件大小不能超过 100MB!");
				}
				return isLt100M
			},

			// 封面图
			uploadPreviewSuccess(response, file, fileList) {
				if (response.code == "200") {
					const { fileUrl } = response.data;
					this.$set(this.formData, 'redPacketCoverUrl', fileUrl)
				}
			},

			// 确认
			handlePost() {
				const redPacketAmount = this.$util.prices(this.formData.redPacketAmount, 'multiply');
				const postData = {
					...this.formData,
					redPacketAmount
				}

				this.$refs.actionform.validate(valid => {
					if (valid) {
						this.showLoading = true;
						// 编辑
						if (postData.redPacketUid) {
							editRedPacket(postData).then(res => {
								if (res.data.isSuccessful !== "Y") {
									this.$message.error(res.data.message);
									return
								}
								this.$message({
									message: "编辑成功！",
									type: "success"
								});
								setTimeout(() => {
									this.closeDialog(true);
								}, 0);
							}).finally(() => {
								this.showLoading = false;
							});
							return
						}

						// 新增
						addRedPacket(postData).then(res => {
							if (res.data.isSuccessful !== "Y") {
								this.$message.error(res.data.message);
								return
							}
							this.$message({
								message: "新增成功！",
								type: "success"
							});
							setTimeout(() => {
								this.closeDialog(true);
							}, 0);
						}).finally(() => {
							this.showLoading = false;
						});
					}
				})
			},
			
			closeDialog(refresh = false, type = ''){
				this.formData = {};
				this.$emit('func', {
					action: false,
					refresh,
					type
				})
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.formItem {
		width: 360px;
    }

</style>

